<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <title>32练习：电影排行榜</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .box{
                width: 300px;
                height: 450px;
                margin: 50px auto;
                border: 1px solid #000;
            }
            .box>h1{
                font-size: 30px;
                line-height: 35px;
                color: deeppink;
                padding-left: 10px;
                border-bottom: 1px dashed #ccc;
            }
            ul>li{
                list-style: none;
                padding: 5px 10px;
                border: 1px dashed #ccc;

            }
            ul>li:nth-child(-n+3) span{
                background: deeppink;
            }
            ul>li>span{
                display: inline-block;
                width: 20px;
                height: 20px;
                background: #ccc;
                text-align: center;
                line-height: 20px;
                margin-right: 10px;
            }
            .content{
                overflow: hidden;
                margin-top: 5px;
                display: none;
            }
            .content>img{
                width: 100px;
                height: 100px;
                float: left;
                
            }
            .content>p{
                width:160px;
                height:160px;
                float: right;
                font-size: 12px;
                line-height: 20px;
            }
            .current .content{
                display: block;
            }
        </style>
        <script src="http://code.jquery.com/jquery-1.12.4.js" 
        integrity="sha256-Qw82+bXyGq6MydymqBxNPYTaUXXq7c8v3CwiYwLLNXU="
        crossorigin="anonymous"></script>
        <script>
            $(function () {  
                //1.监听li的移入事件
                // $("li").mouseenter(function () { 
                //     $(this).addClass("current");
                //  });
                //  //2.监听li的移出事件
                //  $("li").mouseleave(function (param) {  
                //      $(this).removeClass("current");
                //  });

                //简化版本
                $("li").hover(function () {  
                    $(this).addClass("current");
                },function name(params) {
                    $(this).removeClass("current");
                });
            });
        </script>
    </head>
    <body>
        <div class="box">
            <h1>电影排行榜</h1>
            <ul>
                <li><span>1</span>电影名称
                    <div class="content">
                        <img src="img/nezha.jpg" alt="">
                        <p>本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
                            然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？</p>
                    </div>
                </li>
                <li><span>2</span>电影名称
                    <div class="content">
                        <img src="img/nezha.jpg" alt="">
                        <p>本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
                            然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？</p>
                    </div>
                </li>
                <li><span>3</span>电影名称
                    <div class="content">
                        <img src="img/nezha.jpg" alt="">
                        <p>本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
                            然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？</p>
                    </div>
                </li>
                <li><span>4</span>电影名称
                    <div class="content">
                        <img src="img/nezha.jpg" alt="">
                        <p>本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
                            然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？</p>
                    </div>
                </li>
                <li><span>5</span>电影名称
                    <div class="content">
                        <img src="img/nezha.jpg" alt="">
                        <p>本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
                            然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？</p>
                    </div>
                </li>
                <li><span>6</span>电影名称
                    <div class="content">
                        <img src="img/nezha.jpg" alt="">
                        <p>本应是灵珠英雄的哪吒却成了混世大魔王。调皮捣蛋顽劣不堪的哪吒却徒有一颗做英雄的心。
                            然而面对众人对魔丸的误解和即将来临的天雷的降临，哪吒是否命中注定会立地成魔？他将何去何从？</p>
                    </div>
                </li>
            </ul>
        </div>
    </body>
</html>